import 'package:flutter/material.dart';
import 'package:wayofdressing/contraints.dart';
import 'package:wayofdressing/components/inmenubutton.dart';

class DressUpScreen extends StatelessWidget {
  static final String id = 'dressupscreen';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfffffaf0),
      appBar: AppBar(
        backgroundColor: Color(0xfffffaf0),
        elevation: 0,
        toolbarHeight: 80,
        leadingWidth: 100,
        centerTitle: true,
        title: Text(
          '成•衣',
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: kTopTitleFontSize,
          ),
        ),
        leading: Row(
          children: [
            SizedBox(
              width: 10,
            ),
            GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: Transform.scale(
                scaleX: -1,
                child: Icon(
                  Icons.play_arrow_rounded,
                  size: kAppBarButtonSize,
                  color: Colors.black.withOpacity(0.5),
                ),
              ),
            ),
          ],
        ),
        actions: [
          MenuAnchor(
            menuChildren: [
              InMenuButton(
                onPressed: () {},
                text: '历史搭配',
                alignment: Alignment.centerRight,
              ),
            ],
            style: MenuStyle(
              shape: MaterialStateProperty.all(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(25.0),
                ),
              ),
              alignment: Alignment(-3, 0.5),
              padding: MaterialStateProperty.all(EdgeInsets.all(15.0)),
              shadowColor: MaterialStateProperty.all(Colors.transparent),
              backgroundColor: MaterialStateProperty.all(
                Colors.black.withOpacity(0.4),
              ),
            ),
            builder: (BuildContext context, MenuController controller,
                Widget? child) {
              return GestureDetector(
                onTap: () {
                  if (controller.isOpen) {
                    controller.close();
                  } else {
                    controller.open();
                  }
                },
                child: Icon(
                  Icons.keyboard_control_rounded,
                  size: kAppBarButtonSize,
                  color: Colors.black,
                ),
              );
            },
          ),
          SizedBox(
            width: 20,
          )
        ],
      ),
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 30),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  margin: EdgeInsets.symmetric(vertical: 15),
                  padding: EdgeInsets.symmetric(horizontal: 50,vertical: 30),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        // 阴影颜色和透明度
                        spreadRadius: 2,
                        // 阴影扩展半径
                        blurRadius: 5,
                        // 阴影模糊半径
                        offset: Offset(0, 5), // 阴影偏移量
                      ),
                    ],
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Row(
                        children: [
                          CircleAvatar(
                            backgroundImage: AssetImage('images/peanut.jpg'),
                            radius: 30,
                          )
                        ],
                      ),
                      Text('我要制作成衣',style: TextStyle(fontSize: 20),),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.symmetric(vertical: 15),
                  padding: EdgeInsets.symmetric(horizontal: 50,vertical: 30),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.2),
                        // 阴影颜色和透明度
                        spreadRadius: 2,
                        // 阴影扩展半径
                        blurRadius: 5,
                        // 阴影模糊半径
                        offset: Offset(0, 5), // 阴影偏移量
                      ),
                    ],
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Container(decoration: BoxDecoration(color: Colors.black,shape: BoxShape.circle),child: Icon(Icons.accessibility,size: 60,color: Colors.white,)),
                      Text('我制作的成衣',style: TextStyle(fontSize: 20),),
                    ],
                  ),
                ),
              ],
            ),
            Container(
              padding: EdgeInsets.symmetric(vertical: 25),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.2),
                    // 阴影颜色和透明度
                    spreadRadius: 2,
                    // 阴影扩展半径
                    blurRadius: 5,
                    // 阴影模糊半径
                    offset: Offset(0, 5), // 阴影偏移量
                  ),
                ],
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.3),
                                // 阴影颜色和透明度
                                spreadRadius: 2,
                                // 阴影扩展半径
                                blurRadius: 5,
                                // 阴影模糊半径
                                offset: Offset(0, 5), // 阴影偏移量
                              ),
                            ],
                            shape: BoxShape.circle, color: Color(0xfffffaf0),),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.receipt_long_rounded,
                              size: 32,
                            ),
                            Text(
                              '订单',
                              style: TextStyle(
                                  fontSize: 15, fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      ),
                      Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.3),
                                // 阴影颜色和透明度
                                spreadRadius: 2,
                                // 阴影扩展半径
                                blurRadius: 5,
                                // 阴影模糊半径
                                offset: Offset(0, 5), // 阴影偏移量
                              ),
                            ],
                            shape: BoxShape.circle, color: Color(0xfffffaf0),),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.attach_money_rounded,
                              size: 32,
                            ),
                            Text(
                              '收入',
                              style: TextStyle(
                                  fontSize: 15, fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      ),
                      Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.3),
                                // 阴影颜色和透明度
                                spreadRadius: 2,
                                // 阴影扩展半径
                                blurRadius: 5,
                                // 阴影模糊半径
                                offset: Offset(0, 5), // 阴影偏移量
                              ),
                            ],
                            shape: BoxShape.circle, color: Color(0xfffffaf0),),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.money_off_csred_rounded,
                              size: 32,
                            ),
                            Text(
                              '支出',
                              style: TextStyle(
                                  fontSize: 15, fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 20,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.3),
                                // 阴影颜色和透明度
                                spreadRadius: 2,
                                // 阴影扩展半径
                                blurRadius: 5,
                                // 阴影模糊半径
                                offset: Offset(0, 5), // 阴影偏移量
                              ),
                            ],
                            shape: BoxShape.circle, color: Color(0xfffffaf0),),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.payment_rounded,
                              size: 32,
                            ),
                            Text(
                              '卡券',
                              style: TextStyle(
                                  fontSize: 15, fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      ),
                      Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.3),
                                // 阴影颜色和透明度
                                spreadRadius: 2,
                                // 阴影扩展半径
                                blurRadius: 5,
                                // 阴影模糊半径
                                offset: Offset(0, 5), // 阴影偏移量
                              ),
                            ],
                            shape: BoxShape.circle, color: Color(0xfffffaf0),),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.compare_arrows_rounded,
                              size: 32,
                            ),
                            Text(
                              '交易',
                              style: TextStyle(
                                  fontSize: 15, fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      ),
                      Container(
                        width: 70,
                        height: 70,
                        decoration: BoxDecoration(
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.3),
                                // 阴影颜色和透明度
                                spreadRadius: 2,
                                // 阴影扩展半径
                                blurRadius: 5,
                                // 阴影模糊半径
                                offset: Offset(0, 5), // 阴影偏移量
                              ),
                            ],
                            shape: BoxShape.circle, color: Color(0xfffffaf0),),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.volunteer_activism_outlined,
                              size: 32,
                            ),
                            Text(
                              '捐赠',
                              style: TextStyle(
                                  fontSize: 15, fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
